<template>
  <div id="main" ref="mybox" style="width: 100%;height: 42vh;"></div>
</template>
<script>
  import Vue from 'vue'
  import Component, {namespace, Getter} from 'class-component'
  import ECharts from 'echarts'

  const ScreenMapDataGetter = namespace('screenMapData', Getter)
  @Component({
    props: {
      chartData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isClick: {
        type: Boolean,
        default: () => {
          return false
        }
      }
    },
    watch: {
      'chartData': function () {
        console.log(this.chartData)
        this.setOptions()
      }
    }
  })
  export default class HorizontalBarChart extends Vue {
    @ScreenMapDataGetter provinceMapData
    chart = null
    setOptions () {
      this.chart.setOption({
        title: {
          show: false
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // shadow阴影指示器
            shadowStyle: {
              opacity: 0
            }
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '0',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          show: !this.isClick,
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: 'rgb(255, 192, 0)',
            rotate: this.isClick ? 30 : 0 // 旋转度数
          },
          splitLine: {
            lineStyle: {
              color: ['#333']
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.chartData.labels,
          axisLabel: {
            color: 'rgb(255, 192, 0)'
          },
          triggerEvent: true
        },
        series: this.chartData.series
      })
    }
    mounted () {
      let self = this
      this.chart = ECharts.init(this.$refs.mybox)
      if (this.isClick) {
        this.chart.on('click', function (params) {
          if (params) {
            let obj = self.provinceMapData.highRank.find(function (value) {
              if (value.name === params.name || value.name === params.value) {
                return value
              }
            })
            if (obj) {
              obj.provinceName = self.$route.query.provinceName
              obj.provinceCode = self.$route.query.provinceCode
              obj.provinceKey = self.$route.query.provinceKey
              self.$router.push({path: '/chart/filmTicket', query: obj})
            }
          }
        })
      }
    }
  }
</script>
